<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可拖动网格布局</title>
  <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">
  <style>
    h1 {
      font-size: 38px;
      color: #1cd3cd;
      text-align: center;
    }

    ul {
      list-style: none;
    }

    /* 网格图片调用 */
    .s1 {
      background: url('img/140x140.png');
    }

    .s2 {
      background: url('img/300x140.png');
    }

    .s3 {
      background: url('img/140x300.png');
    }

    .s4 {
      background: url('img/300x300.png');
    }
  </style>
</head>

<body>
<section class="wrap">
  <article>
    <h1>GridSter.js 多列网格式拖动布局演示页面</h1>
    <section>
      <div class="gridster">
        <ul>
          <!-- s1-s4：盒子样式；data-row：盒子所在行；data-col：盒子所在列；data-sizex：盒子宽；data-sizey：盒子高 -->
          <li class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
          <li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
          <li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

          <li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
          <li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

          <li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
          <li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
          <li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

          <li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
          <li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

          <li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
          <li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
        </ul>
      </div>
    </section>
  </article>
</section>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script>

<script>
  $(function () {
    $(".gridster ul").gridster({
      // 盒子间距
      widget_margins: [10, 10],
      // 基础盒子大小
      widget_base_dimensions: [140, 140]
    });
  });
</script>
</body>
</html>
